
function CanvasTrace(options) {
  this.options = options || {};
  this.trace = this.options.data;
  this._map = this.options.map;
  this.options.yushu = 0;
  this.draw();
}

CanvasTrace.prototype.draw = function() {
  var canvasLayer = new CanvasLayer({
    map: this._map,
    update: update(this.options)
  });
  var options = this.options;
  if (this.options.showAnimation) {
    setInterval(function() {
      options.yushu += 1;
      options.yushu %= 5;
      canvasLayer.draw();
    }, 200)
  }
}

function changeColor(i) {
  let color;
  switch (i){
    case 0:
      color='#ff0300'
      break;
    case 1:
      color='#ef751f'
      break;
    case 2:
      color='#f7de00'
      break;
    case 3:
      color='#bef900'
      break;
    default:
      color='#f5d312'
  }
  return color ;
}

function update(options) {
  var _map = options.map;
  var _trace = options.data;
  var points=options.points;
  return function() {
    var ctx = this.canvas.getContext("2d");
    if (!ctx) {
      return;
    }
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    for (var i = 0, len = _trace.length-1; i < len; i++) {
      var pixel = _map.pointToPixel(_trace[i]);
      let nextPixel = _map.pointToPixel(_trace[i + 1]);
      if(points[i].pointType==0){
        ctx.setLineDash([8]);
      }else {
        ctx.setLineDash([]);
      }
      ctx.beginPath();
      ctx.moveTo(pixel.x, pixel.y);
        // 绘制带速度颜色的轨迹
        ctx.lineCap = 'round';
        ctx.lineWidth = 6;
        let grd = ctx.createLinearGradient(pixel.x, pixel.y, nextPixel.x, nextPixel.y);
        grd.addColorStop(0, changeColor(points[i].times));
        grd.addColorStop(1, changeColor(points[i+1].times));
        ctx.strokeStyle = grd;
        ctx.lineTo(nextPixel.x, nextPixel.y);
        ctx.stroke();
    }
  }
}

/**
 * 一直覆盖在当前地图视野的Canvas对象
 *
 * @author nikai (@胖嘟嘟的骨头, nikai@baidu.com)
 *
 * @param
 * {
 *     map 地图实例对象
 * }
 */

function CanvasLayer(options) {
  this.options = options || {};
  this.paneName = this.options.paneName || 'markerPane';
  this._map = options.map;
  this.show();
}

CanvasLayer.prototype = new BMap.Overlay();

CanvasLayer.prototype.initialize = function(map) {
  this._map = map;
  let canvas = this.canvas = document.createElement("canvas");
  let ctx = this.ctx = this.canvas.getContext('2d');
  canvas.style.cssText = "position:absolute;" +
    "left:0;" +
    "top:0;" +
    "z-index:" + 0+ ";";
  this.adjustSize();
  this.adjustRatio(ctx);
  map.getPanes()[this.paneName].appendChild(canvas);
  let that = this;
  map.addEventListener('resize', function() {
    that.adjustSize();
    that._draw();
  });
  return this.canvas;
}

CanvasLayer.prototype.adjustSize = function() {
  let size = this._map.getSize();
  let canvas = this.canvas;
  canvas.width = size.width;
  canvas.height = size.height;
  canvas.style.width = canvas.width + "px";
  canvas.style.height = canvas.height + "px";
}

CanvasLayer.prototype.adjustRatio = function(ctx) {
  let backingStore = ctx.backingStorePixelRatio ||
    ctx.webkitBackingStorePixelRatio ||
    ctx.mozBackingStorePixelRatio ||
    ctx.msBackingStorePixelRatio ||
    ctx.oBackingStorePixelRatio ||
    ctx.backingStorePixelRatio || 1;
  let pixelRatio = (window.devicePixelRatio || 1) / backingStore;
  let canvasWidth = ctx.canvas.width;
  let canvasHeight = ctx.canvas.height;
  ctx.canvas.width = canvasWidth * pixelRatio;
  ctx.canvas.height = canvasHeight * pixelRatio;
  ctx.canvas.style.width = canvasWidth + 'px';
  ctx.canvas.style.height = canvasHeight + 'px';
  ctx.scale(pixelRatio, pixelRatio);
};

CanvasLayer.prototype.draw = function() {
  let self = this;
  let args = arguments;

  clearTimeout(self.timeoutID);
  self.timeoutID = setTimeout(function() {
    self._draw.apply(self, args);
  }, 15);
}

CanvasLayer.prototype._draw = function() {
  let map = this._map;
  this.canvas.style.left = -map.offsetX + 'px';
  this.canvas.style.top = -map.offsetY + 'px';
  this.dispatchEvent('draw');
  this.options.update && this.options.update.apply(this, arguments);
}

CanvasLayer.prototype.getContainer = function() {
  return this.canvas;
}

CanvasLayer.prototype.show = function() {
  if (!this.canvas) {
    this._map.addOverlay(this);
  }
  this.canvas.style.display = "block";
}

CanvasLayer.prototype.hide = function() {
  this.canvas.style.display = "none";
  //this._map.removeOverlay(this);
}

CanvasLayer.prototype.setZIndex = function(zIndex) {
  console.log(zIndex)
  this.canvas.style.zIndex = zIndex;
}

CanvasLayer.prototype.getZIndex = function() {
  return this.zIndex;
}
module.exports = {
  CanvasTrace
}
